<template>
  <div id="fun-detail">
  <!-- 上半部分 -->
    <div class="above-content">
      <div class="content">
        <h2>效率提升，超乎想象</h2>
        <p class="desc">
          面向个人和企业的云端原型设计与协同工具，赋能你的设计之旅，让你轻松展示想法、
          快速验证想法、高效落地想法
        </p>
        <a class="to-workspace" href="/embed/auth_box?type=signup">立即体验</a>
      </div>
    </div>
    <!-- 导航 -->
    <div class="middle">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="素材库">
          <div class="content">
            <h3 class="title">素材库</h3>
            <p class="desc">无论个人还是团队，墨刀素材库助你开启高效设计之旅</p>
            <a-row class="detail">
              <a-col :span="8">
                <div class="detail-content">
                  <h3 class="quote_title">免费享用丰富素材库</h3>
                  <p class="quote_desc">海量素材直接拖拽使用，零设计基础也能画原型；20+ 行业模板(持续更新中)，覆盖电商、教育、金融等行业</p>
                </div>
              </a-col>
              <a-col :span="12">
                col-12
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="设计" force-render>
          <a-row>
            <a-col :span="8">
              <div>
                <h3 class="quote_title">免费享用丰富素材库</h3>
                <p class="quote_desc">海量素材直接拖拽使用，零设计基础也能画原型；20+ 行业模板(持续更新中)，覆盖电商、教育、金融等行业</p>
              </div>
            </a-col>
            <a-col :span="12">
              col-12
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="3" tab="高效演示及评审">
          Content of Tab Pane 3
        </a-tab-pane>
        <a-tab-pane key="4" tab="开发标注">
          Content of Tab Pane 3
        </a-tab-pane>
        <a-tab-pane key="5" tab="云端编辑">
          Content of Tab Pane 3
        </a-tab-pane>
        <a-tab-pane key="6" tab="多人协作">
          Content of Tab Pane 3
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 底部 -->
    <div class="start-use">
      <div class="start-content">
        <h2>现在就使用紫枫，开始无忧创作</h2>
        <a-button class="submit-left">
          立即体验
        </a-button>
        <a-button class="submit-right">
          预约咨询
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  layout: "nav",
  
}
</script>
<style lang="less">
  // 中间内容
#fun-detail {
  .ant-tabs-nav .ant-tabs-tab {
    font-size: 20px;
  }
  .ant-btn {
    height: 42px;
    width: 130px;
  }
}

</style>
<style lang="less" scoped>
#fun-detail {
  .above-content {
    height: 500px;
    background-image: url(../../static/image/homePage/sec1_bg.png);
    .content {
      text-align: center;
      padding-top: 12.375rem;
      margin: auto;
      h2 {
        line-height: 1.4;
        font-size: 3.125rem;
        font-weight: 500;
        color: #1f292e;
        margin: 0 0 1rem;
      }
      .desc {
        font-size: 18px;
        color: #1f292e;
        line-height: 1.8;
        margin: 1.125rem auto 2.5rem;
        letter-spacing: 1px;
        max-width: 600px;
      }
      .to-workspace {
        padding: 9px 3.375rem;
        font-weight: 500;
        border-radius: 2px;
        background-color: #415058;
        color: #fcfcfc;
      }
    }
  }
   .middle {
    text-align: center;
    .content {
      padding: 50px 0;
      margin: 0 20%;
      text-align: center;
      .title {
        color: #1f292e;
        font-size: 40px;
        font-weight: 500;
        margin-bottom: 20px;
        margin-top: 0;
      }
      .desc {
        font-size: 18px;
        color: #1f292e;
      }
      .detail {
        display: flex;
        align-items: center;
        .detail-content {
          margin-right: 3rem;
          text-align: left;
          .quote_title {
            font-size: 20px;
            font-weight: 500;
            color: #1f292e;
            margin: 0;
          }
          .quote_desc {
            font-size: 16px;
            line-height: 1.8;
            margin-top: 20px;
            font-weight: 300;
          }
        }
      }
    }
  }
  .start-use {
    margin: 40px auto;
    .start-content {
      box-shadow: 0 5px 30px 0 rgba(43,41,41,0.15);
      padding: 40px 0;
      margin: 0 25% 0;
      line-height: 1.7;
      background-image: linear-gradient(143deg, #298df8 0%, #1c4de3 100%);
      border-radius: 20px;
      position: relative;
      z-index: 1;
      text-align: center;
      h2 {
        color: #fff;
        font-size: 40px;
      }
      .submit-left {
        font-size: 16px;
        color: #ffffff;
        border: 1px solid #fff;
        border-radius: 2px;
        background-color: #3069e0;
      }
      .submit-right {
        font-size: 16px;
        color: #3069e0;
        border: 1px solid #fff;
        border-radius: 2px;
        background-color: #fff;
        margin-top: 20px;
        margin-left: 30px;
      }    
    }
  }
}
  
</style>